<template>
  <el-dialog
    title="找回密码"
    width="650px"
    :visible.sync="dialogVisible"
    :destroy-on-close="true"
    ><div class="step">
      <el-steps :active="active" simple>
        <el-step
          v-for="item in stepData"
          :key="item.index"
          :title="item.title"
          :icon="item.icon"
        ></el-step>
      </el-steps>
    </div>
    <div class="body">
      <!-- 身份验证 -->
      <el-row v-show="active === 0">
        <el-form
          :rules="authenticationFormRule"
          ref="authenticationForm"
          :model="authenticationFormData"
        >
          <el-form-item prop="emailPhone"
            ><el-input
              clearable
              prefix-icon="el-icon-user"
              style="width: 300px"
              placeholder="请输入绑定的邮箱/手机号"
              v-model="authenticationFormData.emailPhone"
            ></el-input
          ></el-form-item>
          <el-form-item prop="veriCode"
            ><el-input
              prefix-icon="el-icon-receiving"
              style="width: 300px"
              v-model="authenticationFormData.veriCode"
              placeholder="收到的验证码"
              ><span slot="append" v-show="getCodeShow" @click="getCode"
                >获取验证码</span
              ><span slot="append" v-show="!getCodeShow"
                >{{ count }}后重新获取</span
              ></el-input
            ></el-form-item
          >
        </el-form>
        <div style="width: 300px">
          <el-button type="primary" @click="nextStep">下一步</el-button
          ><el-button style="float: right" type="danger" plain>重置</el-button>
        </div>
      </el-row>

      <!-- 密码重置 -->
      <el-row v-show="active === 1">
        <el-form
          ref="passwordForm"
          :model="passwordFormData"
          :rules="passwordFormRule"
        >
          <el-form-item prop="password"
            ><el-input
              prefix-icon="el-icon-lock"
              style="width: 300px"
              v-model="passwordFormData.password"
              placeholder="输入新密码"
              show-password
            ></el-input></el-form-item
          ><el-form-item prop="confirmPassword"
            ><el-input
              prefix-icon="el-icon-key"
              style="width: 300px"
              v-model="passwordFormData.confirmPassword"
              placeholder="确认密码"
              show-password
            ></el-input
          ></el-form-item>
        </el-form>
        <div style="width: 300px">
          <el-button type="primary" @click="nextStep">下一步</el-button
          ><el-button style="float: right" type="danger" plain>重置</el-button>
        </div>
      </el-row>

      <el-row v-show="active === 2">
        <el-button type="text" @click="dialogVisible = false"
          >前往登陆页面</el-button
        >
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
const baseForm1 = {
  emailPhone: "",
  veriCode: "",
};
const baseForm2 = {
  password: "",
  confirmPassword: "",
};

export default {
  data() {
    const checkEmailPhone = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!value) {
        return callback(new Error("邮箱/电话不能为空"));
      } else if (mailReg.test(value) || phoneReg.test(value)) {
        callback();
      } else {
        return new callback(new Error("输入的邮箱/电话有错误"));
      }
    };
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      }
      if (value.length < 6) {
        return callback(new Error("密码不能小于6位"));
      } else {
        if (this.passwordFormData.confirmPassword !== "") {
          this.$refs.passwordForm.validateField("confirmPassword");
        }
        callback();
      }
    };
    const checkConfirmPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入确认密码"));
      } else if (value.length < 6) {
        return callback("密码不能小于6位");
      } else if (value !== this.passwordFormData.password) {
        return callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      active: 0,
      dialogVisible: false,
      stepData: [
        { index: 0, title: "身份验证", icon: "el-icon-edit" },
        { index: 1, title: "密码重置", icon: "el-icon-edit" },
        { index: 2, title: "重置完成", icon: "el-icon-check" },
      ],
      authenticationFormData: {
        ...baseForm1,
      },
      authenticationFormRule: {
        emailPhone: [{ validator: checkEmailPhone, trigger: "blur" }],
        veriCode: [
          {
            required: true,
            min: 6,
            max: 6,
            message: "请输入正确的验证码",
            trigger: "blur",
          },
        ],
      },
      getCodeShow: true,
      count: 60,
      passwordFormData: {
        ...baseForm2,
      },
      passwordFormRule: {
        password: [
          {
            required: true,
            validator: checkPassword,
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {
            required: true,
            validator: checkConfirmPassword,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    open() {
      this.authenticationFormData = { ...baseForm1 };
      this.passwordFormData = { ...baseForm2 };

      this.$nextTick((_) => {
        this.$refs.authenticationForm &&
          this.$refs.authenticationForm.clearValidate();
        this.$refs.passwordForm && this.$refs.passwordForm.clearValidate();
        this.dialogVisible = true;
      });
    },
    getCode() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.getCodeShow = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.getCodeShow = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },

    nextStep() {
      this.$refs.authenticationForm.validate((valid) => {
        if (valid) {
          ++this.active;
        }
        return false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  background-color: #f5f5f5;
  height: 300px;
  .el-row {
    width: 400px;
    margin: 30px auto;
    span {
      cursor: pointer;
    }
  }
}
</style>
